{extend name="common/layout" /}
{block name="main"}
<div class="admin-main layui-anim layui-anim-upbit">

    <div class="padding30">
        <h3 class="page-box-title">{:lang('Clouds')} {$name ? '-'.$name : ''}</h3>  
        <div class="demoTable">
            <div class="layui-inline">
                <input class="layui-input layui-search-input" name="key" id="key" placeholder="{:lang('Please enter the keyword')}">
            </div>
            <button class="layui-btn layui-search-btn borderrad5" id="search" data-type="reload">{:lang('search')}</button>
            <div style="clear: both;"></div>
        </div>
        
    </div>
    <div class="" id="_listBox">
        <div style="text-align: right;"><a data-href="{:url('edit',array('pid'=>$pid))}" href="#"  class="layui-btn layui-btn-normal layui-btn-add borderrad5 _showmodel" title="{:lang('Add')}" ><i class="icon icon-plus"></i></a></div>
    <table class="layui-table" id="list" lay-filter="list"></table>
    </div>
</div>
{/block}
{block name="footer"}
<script type="text/html" id="order">
    <input name="{{d.id}}" data-id="{{d.id}}" class="list_order layui-input" value=" {{d.sort}}" size="20"/>
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="{:lang('No|Off')}" lay-filter="status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="_name" >
    {{# if(d.icon !='' && d.icon != null){ }}
        <img src="{{d.icon}}" width="25">
    {{# } }}
     {{d.name}}
</script>
<script type="text/html" id="action">
    {{#  if(d.pid == 0){ }}
    <a href="{:url('index')}?pid={{d.id}}" class="layui-btn layui-btn-xs">{:lang('Cloud Area')}</a>
    {{#  } }} 
    <a href="#" data-href="{:url('edit')}?id={{d.id}}&pid={{d.pid}}" class=" _showmodel">{:lang('Edit')}</a> | 
    <a class="" lay-event="delete">{:lang('Delete')}</a>
</script>
   <script type="text/javascript">
    layui.use('table', function() {
       var table = layui.table, $ = layui.jquery,layer = layui.layer,form = layui.form;
       var tableIn = table.render({
            elem: '#list'
            ,url: '{:url("getLists",array('pid'=>$pid))}',
            method:'post',
            page:getPageThume()
            ,cols: [[
                // {checkbox: true, fixed: true},
                // {field:'id', title: "{:lang('Item')}", width:"10%",sort:true},
                {field:'name', title: "{:lang('Name')}", width:"50%",sort:true,templet: '#_name'}
                // ,{field:'sort', title: "{:lang('Sort')}", width:"15%",sort:true,templet: '#order'}
                ,{field:'status', title: "{:lang('Status')}", width:"15%",templet: '#status'}
                ,{width:'33%',title: "{:lang('Operating')}", align:'right', toolbar: '#action'}
            ]]
        });
       form.on('switch(status)', function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            var status = obj.elem.checked===true?1:0;
            $.post('{:url("editState")}',{'id':id,'status':status},function (res) {
                layer.close(loading);
                if (res.code==1) {
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })
        });
       table.on('tool(list)', function(obj) {
            var data = obj.data;
            if (obj.event === 'delete'){
                layer.confirm('{:lang("Are you sure you want to delete the record?")}', function(index){
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('delete')}",{id:data.id},function(res){
                        layer.close(loading);
                        if(res.code===1){
                            obj.del();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
       //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            tableIn.reload({
                where: {key: key}
            });
        });
       $('body').on('blur','.list_order',function() {
            var id = $(this).attr('data-id');
            var sort = $(this).val();
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post('{:url("sort")}',{id:id,sort:sort},function(res){
                layer.close(loading);
                if(res.code === 1){
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                }
            })
        });
       $('body').on("click",'._showmodel',function(){
          var url = $(this).data('href');
          layer.open({
            type: 2, //此处以iframe举例
            title: "{:lang('Clouds')}",
            area: ['760px', '550px'],
            shade: 0.7,
            maxmin: true,
            content:url
         })
       })
       
    })
   </script>
{/block}